<template>
	<view class="uni-tab-bar">
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="0" @refresh="onPulldownReresh">
		<view class="scrollbox">
			<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
				<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="'top'+tab.id"
				 :data-current="index" @click="tapTab(index)">{{tab.name}}</view>
			</scroll-view>
			<image class="more" id="zz12345" src="/static/btn_menu.png" mode=""></image>
		</view>
		<swiper class="swiper-box" duration="300" :current="tabIndex"  @change="changeTab">
			<swiper-item v-for="(tabs,index1) in swiperItem" :key="tabs.id">
				<scroll-view class="list" scroll-y @scrolltolower="loadMore(index1,tabs.id)" :style="{height: 'calc(100% - ' + pageTop + 'px)'}">
					<view class="uni-list">
						<view class="uni-list">
							<view class="uni-list-cell" hover-class="uni-list-cell-hover" style="overflow: hidden;" v-for="(newsitem,index2) in show_data_arr[index1]" :key="newsitem.id">
								<view class="uni-media-list" @click="goDetail(newsitem)">
									<view class="uni-media-list-body">
										<view class="uni-media-list-text-top"><text class="tapvip" v-if="newsitem.need_vip!=0">VIP{{newsitem.need_vip}}</text> {{newsitem.title}}</view>
										<view class="uni-media-list-text-bottom">
											<text>
												<text class="tap tapbu" v-for="(temp,index1) in newsitem.tags" :key="index1">
													{{temp}}
												</text>
												<!-- <text class="tap tapDr">大气</text> -->
											</text>
											<text>{{newsitem.update_time}}</text>
										</view>
									</view>
									<image class="uni-media-list-logo" :src="baseURL+newsitem.pic_utl"></image>
								</view>
							</view>
						</view>
					</view>
					<mix-load-more :status="loadMoreStatus"></mix-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 弹窗 -->
		<view class="cgts" v-if="showSuccess">
			<view>
				<uni-icons :type="'close'" :size="'30'" @click="showSuccess=false"></uni-icons>
				<text>您现在不能查看，需要提升会员等级或者单独购买！</text>
				<view class="buts">
					<button type="primary" @click="pay">￥{{price}}</button>
					<button type="primary" @click="chargeVip">提升会员</button>
				</view>
			</view>
		</view>
		</mix-pulldown-refresh>
	</view>
</template>
<script>
	import API from '../../common/api.js';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			mixLoadMore,
			mixPulldownRefresh,
			uniIcons
		},
		data() {
			return {
				pageTop:uni.upx2px(0),
				loadMoreStatus:false,
				showSuccess:false,
				price:'',//给钱看要的价格
				newsid:'',//给钱看要的id
				
				
				
				scrollLeft: 0,
				isClickChange: false,
				tabIndex: 0,
				newsitems: [],
				
				tabBars: [{name: '大气污染',id: 'guanzhu'}],
				swiperItem :'',
				page:1,
				rows:10,
				data_arr:[],//列表数据页面总数等信息
				show_data_arr:[],//列表数据信息
				baseURL:API.baseURL,
			}
		},
		onLoad: function() {
			this.list();
		},
		methods: {
			//分类列表
			list(){
				var _this = this;
				uni.request({
					url:API.list,
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						_this.tabBars = res.data.rows;
						_this.swiperItem = res.data.rows;
						// for (let j = 0; j < _this.tabBars.length; j++) {
							// _this.lists_detail(_this.tabBars[j].id,j)
							// _this.show_data_arr.push([]);
						// }
						_this.lists_detail(_this.tabBars[0].id,0,'first')
						
						_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
						_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
					}
				})
			},
			/**分类列表下的数据
			 * @param {Object} id 文章类别id
			 * @param {Object} j  文章类别列表索引
			 */
			lists_detail(id,j,first){
				var _this = this;
				_this.loadMoreStatus = true;
				uni.request({
					url:API.ttNews_list,
					method:"GET",
					data:{page:_this.page,rows:_this.rows,where:{cat_id:id,status:1}},
					header:API.get_head(),
					success: (res) => {
						_this.data_arr[j]=res.data;
						res.data.rows.forEach(function(v,i){
							v.tags?v.tags=v.tags.split(','):'';
						})
						if(first){
							_this.swiperItem[j].id=_this.swiperItem[j].id+'-'+Math.floor(Math.random()*10);
						}
						//else{
							_this.show_data_arr[j]=res.data.rows;
						// }
						_this.loadMoreStatus = false;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
						_this.loadMoreStatus = false;
					}
				})
			},

			onPulldownReresh(){
				this.loadMoreStatus=false;
				this.scrollLeft=0;
				
				this.tabIndex=0;
				
				this.data_arr=[];
				this.show_data_arr=[];
				
				this.list();
			},
			//加载下一页
			loadMore(e,id) {
				var _this=this;
				_this.loadMoreStatus = 1;
				if(_this.data_arr[e].page=_this.data_arr[e].total){
					_this.loadMoreStatus = 2;
					return false;
				}
				uni.request({
					url:API.ttNews_list,
					method:"GET",
					data:{page:_this.data_arr[e].page+1,rows:_this.rows,where:{id:id}},
					header:API.get_head(),
					success: (res) => {
						_this.data_arr[e].page=_this.data_arr[e].page+1;
						_this.show_data_arr[e]=_this.show_data_arr[e].concat(res.data.rows);
						_this.loadMoreStatus = 3;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
						_this.loadMoreStatus = 3;
					}
				})
			},
			//切换tab 时触发
			async changeTab(e) {
				let index = e.detail.current;
				this.loadMoreStatus = 0;
				if(!this.show_data_arr[index]){//第一次没有数据时
					this.lists_detail(this.tabBars[index].id,index,'first');//切换时数据请求
				}
				if (this.isClickChange) {
					this.tabIndex = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getElSize("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				for (let i = 0; i < index; i++) {
					let result = await this.getElSize('top'+this.tabBars[i].id);
					width += result.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth,
					nowElement = await this.getElSize('top'+this.tabBars[index].id),
					nowWidth = nowElement.width;
				if (width + nowWidth - tabBarScrollLeft > winWidth) {
					this.scrollLeft = width + nowWidth - winWidth;
				}
				if (width < tabBarScrollLeft) {
					this.scrollLeft = width;
				}
				this.isClickChange = false;
				this.tabIndex = index; //一旦访问data就会出问题
			},
			getElSize(id) { //得到元素的size
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select('#' + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			//点击tab-bar
			async tapTab(index) { 
				if (this.tabIndex === index) {
					return false;
				} else {
					let tabBar = await this.getElSize("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.tabIndex = index;
				}
			},
			
			//立即购买文章
			pay() {//获取支付信息
				let _this = this;
					uni.request({
						url: this.$API.wxpay,
						method:"GET",
						data: {
							pay_price: parseInt(this.price * 100),
						},
						success: (result) => {
							var orderInfo = result;
							if (orderInfo.statusCode != 200) {
								uni.showModal({
									content: "获得订单信息失败",
									showCancel: false
								})
								return;
							}
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: orderInfo.data,
								success: (e) => {
									uni.showModal({
										content: "支付成功",
										showCancel: false,
										success() {
											_this.buyNews();
										}
									});
									
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败",
										showCancel: false
									})
								},
								complete: () => {
									
								}
							})
						},
						fail: (e) => {
							// res(result)
						}
					})
			},
			//支付之后录入
			buyNews(){
				var _this = this;
				uni.request({
					url:this.$API.isBuy,
					method:"GET",
					data:{
						userid:uni.getStorageSync("userid"),
						newsid:this.newsid,
						type:'news'
					},
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data){
							_this.showSuccess = false;
							// uni.navigateTo({
							// 	url: '/pages/news/list2detail-detail?data=' + e
							// })
						}else{
							_this.showSuccess = true;
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},			
			//跳转到购买会员
			chargeVip(){
				uni.navigateTo({
					url:"/pages/newpages/vip"
				})
			},
			//跳转详情页面
			goDetail(e) {
				this.price = e.price;
				this.newsid = e.id;
				
				
				var _this = this;
				if(uni.getStorageSync("vip_status") < e.need_vip){
					//检查是否购买了该文章
					uni.request({
						url:this.$API.isBuy,
						method:"GET",
						data:{
							userid:uni.getStorageSync("userid"),
							newsid:_this.newsid,
							type:'news'
						},
						header:this.$API.get_head(),
						success: (res) => {
							if(res.data){
								_this.showSuccess = false;
								uni.navigateTo({
									url: '/pages/news/list2detail-detail?data=' + _this.newsid
								})
							}else{
								_this.showSuccess = true;
							}
						},
						fail: () => {
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						}
					})
					return false;
				}
				uni.navigateTo({
					url: '/pages/news/list2detail-detail?data=' + _this.newsid
				})
			},
		}
	}
</script>

<style>
	page{
		background:#FFFFFF;
	}
	.active{font-weight: bold;}
	/* #ifdef MP-ALIPAY */
	.swiper-tab-list {
		display: inline-block;
	}
	/* #endif */
	.uni-swiper-tab{
		width:668upx;
		padding-right:88upx;
	}
	.scrollbox{position:relative;}
	.more{
		position:absolute;
		right:0;
		top:0;
		width:40upx;
		height:40upx;
		padding:30upx 22upx;
		box-shadow: #e6e6e6 0upx -7upx 20upx 0upx;
	}
	.listMe{
		padding:24upx;
		height:198upx;
		position: relative;
		border-bottom:1upx solid #CCCCCC;
	}
	/* .listMe>view{float:left;} */
	.lefttext{width:460upx;position:absolute;left:24upx;height:150upx;}
	.lefttext>.bottomc{width:460upx;position:absolute;bottom:12upx;height:30upx;}
	.lefttext>.bottomc>view:first-child{width:50%;position: absolute;left: 0;bottom: 0;font-size: 24upx;color:#999999;}
	.lefttext>.bottomc>view:last-child{width:50%;position: absolute;right: 0;bottom: 0;font-size: 24upx;color:#999999;}
	.bottomc .tabs{width:28upx;height: 28upx;vertical-align: middle;}
	.bottomc .tops{width:54upx;height: 28upx;vertical-align: middle;}
	.rimg{width:200upx;position:absolute;right:24upx;}
	.rimg>image{width:200upx;height:150upx;}
	.list_title{font-size:36upx;color:#222222;line-height:1.2;height:80upx;overflow: hidden;}
	.swiper-box::-webkit-scrollbar {display:none}
	scroll-view::-webkit-scrollbar {display:none}
	.swiper-item::-webkit-scrollbar {display:none}
	
	
	
	/*全新的列表*/
	.uni-media-list-logo {
		width: 180upx;
		height: 140upx;
		margin-left:20upx;
		margin-right: 0;
	}
	
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 74upx;
		font-size: 28upx;
		overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.tap {
		border:1px solid #000000;
		font-size:16upx;
		color: #000000;
		padding:4upx 7upx;
		margin-right:10upx;
		border-radius:10upx;
	}
	.tap.tapDr{
		border-color: #F43530;
		color: #F43530;
	}
	.tap.tapbu{
		border-color: #6AAFF5;
		color:  #6AAFF5;
	}
	.tapvip{
		margin-right:10upx;
		color:#FFBE00;
		position:absolute;
		top: 8upx;
		left: -74upx;
		transform:rotate(-45deg);
		width:200upx;
		background:#808080;
		text-align: center;
		font-size:24upx;
	}
	.navigator-hover{
		opacity:1;
		background:none;
	}
	
	/*弹窗*/
		.cgts{
			width: 100%;
			height: 100%;
			background: #007AFF;
			position: fixed;
			top:0;
			background: rgba(0,0,0,.5);
			z-index:999;
		}
		.cgts>view{
			width: 460upx;
			height: 320upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius:10upx;
			background: #fff;
			box-sizing: border-box;
			padding:70upx 38upx;
			position:relative;
		}
		.cgts .uni-icon.uni-icon-close{
			position: absolute;
			right:20upx;
			top:20upx;
		}
		.cgts text{
			font-size:30upx;
			font-family:Microsoft YaHei;
			font-weight:bold;
			text-align: center;
			display: block;
			width: 100%;
			margin-bottom: 45upx;
			color:rgba(66,66,66,1);
		}
		.cgts .buts{
			display: flex;
			justify-content: space-around ;
		}
		.cgts .buts button{
			width:170upx;
			font-size:28upx;
			display: inline-block;
		}
		.cgts .buts button:first-child{
			background-color:transparent;
			border:none;
			color: #D81E06;
		}
</style>
